<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title>Kukbuk - Edycja przepisu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css"
	href="../../../../css/bootstrap.min.css"
	th:href="@{/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../../../../css/custom.css"
	th:href="@{/css/custom.css}" />
<!-- WYSIWYG HTML5 -->
<link rel="stylesheet" type="text/css"
	href="../../../../css/bootstrap-wysihtml5.css"
	th:href="@{/css/bootstrap-wysihtml5.css}" />
</head>

<body>
	<!-- TOP MENU -->
	<div th:substituteby="template :: top-menu"></div>
	<!-- /TOP MENU -->

	<!-- MAIN CONTAINER -->
	<div class="container">
		<div class="row">
			<div class="page-header">
				<h1>Edycja przepisu</h1>
			</div>
		</div>

		<!-- MESSAGE BOXES -->
		<div class="row" th:include="template :: message-boxes"></div>
		<!-- /MESSAGE BOXES -->

		<div class="row">
			<form th:action="@{'/user/recipe/edit/' + ${id}}" th:object="${form}"
				method="POST">


				<div class="row">
					<div class="span5">
						<div class="control-group"
							th:classappend="${#fields.hasErrors('ingredients')}? 'error'">
							<label class="control-label" for="ingredients">Składniki</label>
							<span class="help-inline"
								th:if="${#fields.hasErrors('ingredients')}"
								th:errors="*{ingredients}">ERROR</span>
							<textarea class="input-xlarge span5  wysiwyg-here"
								id="ingredients" style="height: 370px;"
								th:field="*{ingredients}"></textarea>
						</div>
					</div>


					<div class="span7">
						<div class="control-group"
							th:classappend="${#fields.hasErrors('category')}? 'error'">
							<label class="control-label" for="category"> Kategoria</label>
							<div class="controls">
								<select class="span5" id="category" th:field="*{category}">
									<option
										th:each="cat : ${beans.categoryService.allButRootCategoriesAsMap}"
										th:value="${cat.value}" th:text="${cat.key}"
										th:disabled="${#bools.isFalse(beans.categoryService.getCategory(cat.value).isCanAddRecipes)}">BRAK</option>
								</select> <span class="help-inline"
									th:if="${#fields.hasErrors('category')}"
									th:errors="*{category}">ERROR</span>
							</div>
						</div>


						<div class="control-group"
							th:classappend="${#fields.hasErrors('name')}? 'error'">
							<label class="control-label" for="name">Nazwa</label>
							<div class="controls">
								<input type="text" class="input-xlarge span5" id="name"
									th:field="*{name}" /> <span class="help-inline"
									th:if="${#fields.hasErrors('name')}" th:errors="*{name}">ERROR</span>
								<p class="help-block">Wpisz nazwę składającą się z minimum 5
									oraz maksimum 60 znaków.</p>
							</div>
						</div>


						<div class="control-group"
							th:classappend="${#fields.hasErrors('shortDescription')}? 'error'">
							<label class="control-label" for="shortDescription">Krótki
								Opis</label>
							<div class="controls">
								<textarea class="input-xlarge span5" id="shortDescription"
									th:field="*{shortDescription}"></textarea>
								<span class="help-inline"
									th:if="${#fields.hasErrors('shortDescription')}"
									th:errors="*{shortDescription}">ERROR</span>
							</div>
						</div>

						<div class="row">
							<div class="span3">
								<div class="control-group"
									th:classappend="${#fields.hasErrors('prepareTime')}? 'error'">
									<label class="control-label" for="prepareTime">Czas
										przygotowania (minut)</label>
									<div class="controls">
										<input type="text" class="input-xlarge span2" id="prepareTime"
											th:field="*{prepareTime}" /> <span class="help-inline"
											th:if="${#fields.hasErrors('prepareTime')}"
											th:errors="*{prepareTime}">ERROR</span>
									</div>
								</div>
							</div>


							<div class="span3">
								<div class="control-group"
									th:classappend="${#fields.hasErrors('servings')}? 'error'">
									<label class="control-label" for="servings">Ilość
										porcji</label>
									<div class="controls">
										<input type="text" class="input-xlarge span2" id="servings"
											th:field="*{servings}" /> <span class="help-inline"
											th:if="${#fields.hasErrors('servings')}"
											th:errors="*{servings}">ERROR</span>
									</div>
								</div>
							</div>
						</div>


						<div class="control-group"
							th:classappend="${#fields.hasErrors('imageUrl')}? 'error'">
							<label class="control-label" for="imageUrl">Adres URL
								zdjęcia</label>
							<div class="controls">
								<input type="text" class="input-xlarge" id="imageUrl"
									th:field="*{imageUrl}" /> <span class="help-inline"
									th:if="${#fields.hasErrors('imageUrl')}"
									th:errors="*{imageUrl}">ERROR</span>

							</div>
						</div>


						<div class="control-group"
							th:classappend="${#fields.hasErrors('isPrivate')}? 'error'">
							<label class="control-label" for="isPrivate">Czy dany
								przepis jest prywatny? </label>
							<div class="controls">
								<label class="checkbox"> <input type="checkbox"
									id="isPrivate" th:field="*{isPrivate}" /> Tak
								</label>
								<p th:if="${#fields.hasErrors('isPrivate')}">
									<span class="help-inline" th:errors="*{isPrivate}">ERROR</span>
								</p>
								<p class="help-block">Prywatne przepisy nie są udostępniane
									innym użytkownikom</p>
							</div>
						</div>


					</div>
				</div>


				<div class="row">
					<div class="control-group span12"
						th:classappend="${#fields.hasErrors('description')}? 'error'">
						<label class="control-label" for="description">Pełny Opis</label>
						<span class="help-inline"
							th:if="${#fields.hasErrors('description')}"
							th:errors="*{description}">ERROR</span>
						<p>
							<textarea class="input-xlarge span10 wysiwyg-here"
								id="description" style="height: 300px;"
								th:field="*{description}"></textarea>
						</p>
					</div>
				</div>


				<div class="row">
					<div class="form-actions">
						<button class="btn btn-primary" type="submit">
							<i class="icon-ok icon-white"></i> Zatwierdź
						</button>
					</div>
				</div>

			</form>
		</div>
	</div>
	<!-- /MAIN CONTAINER -->

	<!-- ======================================================== -->
	<!-- Scripts at bottom of page means faster loading times. -->
	<!-- Latest jQuery -->
	<script type="text/javascript"
		src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<!-- Bootstrap -->
	<script type="text/javascript" src="../../../../js/bootstrap.min.js"
		th:src="@{/js/bootstrap.min.js}"></script>
	<!-- WYSIWYG HTML5 -->
	<script type="text/javascript"
		src="../../../../js/wysihtml5-0.3.0_rc2.min.js"
		th:src="@{/js/wysihtml5-0.3.0_rc2.min.js}"></script>
	<script type="text/javascript"
		src="../../../../js/bootstrap-wysihtml5.js"
		th:src="@{/js/bootstrap-wysihtml5.js}"></script>
	<!-- Custom -->
	<script type="text/javascript" src="../../../../js/custom.js"
		th:src="@{/js/custom.js}"></script>
</body>
</html>